import type {
  SkuPopupEvent,
  SkuPopupInstance,
  SkuPopupLocaldata,
} from '@/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup'
import { postMemberCartAPI } from '@/services/cart'
import { getGoodsByIdAPI } from '@/services/goods'
import type { GoodsResult } from '@/types/goods'
import { onLoad } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'

const useGoodsHooks = () => {
  // 获取屏幕边界到安全区域距离
  const { safeAreaInsets } = uni.getSystemInfoSync()
  // 获取商品详情信息
  const goods = ref<GoodsResult>()
  const getGoodsByIdData = async (id: string) => {
    const res = await getGoodsByIdAPI(id)
    goods.value = res.result

    // SKU组件所需格式
    localdata.value = {
      _id: res.result.id,
      name: res.result.name,
      goods_thumb: res.result.mainPictures[0],
      spec_list: res.result.specs.map((v) => {
        return {
          name: v.name,
          list: v.values,
        }
      }),
      sku_list: res.result.skus.map((v) => {
        return {
          _id: v.id,
          goods_id: res.result.id,
          goods_name: res.result.name,
          image: v.picture,
          price: v.price * 100, // 注意：需要乘以 100
          stock: v.inventory,
          sku_name_arr: v.specs.map((vv) => vv.valueName),
        }
      }),
    }
  }

  // 商品信息
  const localdata = ref({} as SkuPopupLocaldata)

  // 轮播图变化时
  const currentIndex = ref(0)

  const onChange: UniHelper.SwiperOnChange = (ev) => {
    currentIndex.value = ev.detail.current
  }

  // 点击图片时
  const onTapImage = (url: string) => {
    // 大图预览
    uni.previewImage({
      current: url,
      urls: goods.value!.mainPictures,
    })
  }

  // uni-ui 弹出层组件 ref
  const popupRef = ref()

  // 弹出层条件渲染
  const popupName = ref<'address' | 'service'>()

  const openPopup = (name: typeof popupName.value) => {
    // 修改弹出层名称
    popupName.value = name
    popupRef.value?.open()
  }

  // 是否显示SKU组件
  const isShowSku = ref(false)
  // 商品信息
  // 按钮模式
  enum SkuMode {
    Both = 1,
    Cart = 2,
    Buy = 3,
  }
  const mode = ref<SkuMode>(SkuMode.Cart)
  // 打开SKU弹窗修改按钮模式
  const openSkuPopup = (val: SkuMode) => {
    // 显示SKU弹窗
    isShowSku.value = true
    // 修改按钮模式
    mode.value = val
  }
  // SKU组件实例
  const skuPopupRef = ref<SkuPopupInstance>()
  // 计算被选中的值
  const selectArrText = computed(() => {
    return skuPopupRef.value?.selectArr?.join(' ').trim() || '请选择商品规格'
  })

  // 加入购物车事件
  const onAddCart = async (ev: SkuPopupEvent) => {
    await postMemberCartAPI({ skuId: ev._id, count: ev.buy_num })
    uni.showToast({ title: '添加成功' })
    isShowSku.value = false
  }
  // 立即购买
  const onBuyNow = (ev: SkuPopupEvent) => {
    uni.navigateTo({ url: `/pagesOrder/create/create?skuId=${ev._id}&count=${ev.buy_num}` })
  }

  // 页面加载
  onLoad((options) => {
    getGoodsByIdData(options!.id)
  })

  return {
    goods,
    localdata,
    mode,
    SkuMode,
    popupRef,
    popupName,
    currentIndex,
    safeAreaInsets,
    selectArrText,
    isShowSku,
    skuPopupRef,
    onChange,
    openPopup,
    onTapImage,
    openSkuPopup,
    onAddCart,
    onBuyNow,
  }
}

export default useGoodsHooks
